<template>
  <Header title="用户管理"></Header>
  <van-field v-model="data.nickname" label="昵称" placeholder="请输昵称" />
  <van-field
    v-model="data.sign"
    label="个性签名"
    placeholder="请输入个性签名"
  />
  <van-field v-model="data.pass" label="密码" placeholder="请输入密码" />
  <div class="button">
    <van-button type="primary" round color="#ffc400" @click="onSave"
      >保存</van-button
    >
    <van-button type="primary" round color="#ffc400" @click="logout"
      >退出登录</van-button
    >
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
let data = ref({
  nickname: "",
  sign: "战胜可敬的自己",
  pass: "",
});

const onSave = () => {
  if (data.value.nickname && data.value.pass) {
    let userinfo = JSON.parse(localStorage.getItem("userinfo"));
    let newUserinfo = {
      name: data.value.nickname || userinfo.name,
      pass: data.value.pass || userinfo.pass,
      describe: data.value.sign,
    };
    localStorage.setItem("userinfo", JSON.stringify(newUserinfo));
    showToast("修改个人信息成功");
    router.push("/mine");
  } else {
    showToast("请输入要修改的昵称和密码");
  }
};

const logout = () => {
  localStorage.removeItem("token");
  showToast("退出登录成功");
  router.push("/login");
};
</script>

<style lang="less" scoped>
.button {
  display: flex;
  flex-direction: column;
  padding: 15px 30px;
  .van-button {
    margin-bottom: 15px;
  }
}
</style>
